<template>
  <div>
    <div>
        <el-form inline>
          <el-form-item>
            <el-input placeholder="输入名称" v-model="searchText"></el-input>
          </el-form-item>
          <el-form-item label="专业选择">
            <el-select v-model="CategoryOne">
              <el-option v-for="item in opt1"
              :label="item.label" :value="item.value"
              :key="item.value"></el-option>
            </el-select>
              <el-select v-model="CategoryTwo">
              <el-option v-for="item in opt2"
                :label="item.label" :value="item.value"
                :key="item.value"></el-option>
            </el-select>
              <el-select v-model="CategoryThree">
                <el-option v-for="item in opt3"
                :label="item.label" :value="item.value"
                :key="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
              <el-button type="success" @click="toSearch">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">添加</el-button>
          </el-form-item>
        </el-form>
    </div>
    <!-- 表格部分 -->
    <div>
        <table-title icon="el-icon-user-solid" 
          title="课程列表"></table-title>
          <el-table border stripe :data="courseList">
            <el-table-column label="课程名称" prop="Cname"></el-table-column>
             <el-table-column label="课程代号" prop="Cnumber"></el-table-column>
              <el-table-column label="在学人数" prop="onlineUser"></el-table-column>
              <el-table-column label="编辑日期">
                <template slot-scope="scope">
                  <div>
                      {{new Date(scope.row.createAt).toLocaleString()}}
                  </div>
                </template>
              </el-table-column>
                <el-table-column label="状态">
                  <template  slot-scope="scope">
                    <div>
                        {{scope.row.isState==1?'草稿':
                      (scope.row.isState==2?'上架':'下架')
                      }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <div class="btn_wrap">
                      <el-link type="primary" @click="toEdit(scope.row)">编辑</el-link>
                       <el-link v-if="scope.row.isState!=2" type="success" @click="toChange(scope.row.ID)">上架</el-link>
                       <el-link v-if="scope.row.isState==2" type="danger"  @click="toChange(scope.row.ID)">下架</el-link>
                        <el-link type="danger" @click="toDel(scope.row._id)">删除</el-link>

                         <el-link type="success" @click="toTopCourse(scope.row.ID)">
                          {{scope.row.isTop?'取消置顶':'置顶'}}
                         </el-link>
                    </div>
                  </template>
                </el-table-column>
          </el-table>
          <el-pagination :total="total" background
            :current-page="pageStart" :page-size="pageSize"
            @current-change="pageChange">

          </el-pagination>
    </div>
  </div>
</template>

<script>
import {getCourseList,upDownCourse,delCourseApi,toTopApi} from '../../api/course'
import cateObj from '../../mixins/cate.js'
export default {
  name: 'JsxyIndex',
  mixins:[cateObj],
  data() {
    return {
      courseList:[],//列表数据
      total:0,//总条数
      pageSize:3,//每页条数
      pageStart:1,
      searchText:"",//课程名称搜素
      CategoryOne:"",//一级分类
      CategoryTwo:"",//二级分类
      CategoryThree:""//三级分类
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    
  },

  methods: {
    toEdit(row){ //点击编辑跳转课程编辑页
        this.$router.push({
          name:"courseAdd",
          query:{
            ID:row.ID,
            _id:row._id,
            sta:"编辑"
          }
        })
    },
    async toTopCourse(ID){ //课程置顶
        let res=await toTopApi(ID)
        this.$message.success("操作成功")
        this.getList()
    },
   async  toDel(_id){//删除接口
       let res=await delCourseApi(_id)
      
        this.$message.success("删除成功")
        this.getList()
         
    },
   async  toChange(ID){ //课程上架下架接口
      let res=await upDownCourse(ID);
      console.log(res)
      if(res.data.success){
        this.$message.success("操作成功")
        this.getList()
      }
    },
    pageChange(val){//页码改变事件
      this.pageStart=val; //改变当前页码
      this.getList()//从新调用接口
    },
    toSearch(){ //点击查询

       this.getList()
         this.searchText="" //清空输入的查询内容
        this.CategoryOne=""
        this.CategoryTwo=""
        this.CategoryThree=""
    },
      async getList(){ //获取课程列表接口
          let res=await getCourseList({
              pageStart:this.pageStart,//页码
              searchText:this.searchText,
              CategoryOne:this.CategoryOne,
              CategoryTwo:this.CategoryTwo,
              CategoryThree:this.CategoryThree
          })
          console.log(res)
          // 存储后台返回的列表数据
          this.courseList=res.data.data.list;
          this.total=res.data.data.count;
          this.pageSize=res.data.data.pageSize;
      }
  },
};
</script>
<style lang="less">
    .btn_wrap{
      a{
        margin-left:10px;
      }
    }
</style>